<template>
  <div class="chat-dialog">
    <div class="chat-messages">
      <div 
        v-for="(message, index) in chatHistory" 
        :key="index" 
        :class="{ 'question-bubble': message.type === 'question', 'answer-bubble': message.type === 'answer' }"
      >
        <span>{{ message.displayContent }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted, onUnmounted, provide } from 'vue';
import { useMedicalStore } from '@/store/medical';
import { initSocket, sendMessage } from '@/utils/socket';

const props = defineProps({
  chatHistory: {
    type: Array,
    default: () => []
  }
});

const medicalStore = useMedicalStore();
const currentResponse = ref('');

const updateMessageDisplay = (message) => {

  if (medicalStore?.chatHistory?.length > 0) {
    const lastMessage = medicalStore.chatHistory[medicalStore.chatHistory.length - 1];
    if (lastMessage?.type === 'answer') {
      lastMessage.displayContent = message;
    }
  }
}

// 修改初始化方式
const socket = ref(null);
const isWebSocketReady = ref(false);

// 提供 WebSocket 状态给子组件
provide('webSocketStatus', isWebSocketReady);

onMounted(async () => {
  try {
    socket.value = await initSocket(updateMessageDisplay);
    isWebSocketReady.value = true;
  } catch (error) {
    console.error('WebSocket 连接失败:', error);
    isWebSocketReady.value = false;
  }

  console.log(props.chatHistory)
});

onUnmounted(() => {
  if (socket.value) {
    socket.value.close();
  }
});
</script>

<style scoped>
/* 聊天对话框整体样式 */
.chat-dialog {
  background: linear-gradient(135deg, #e0f7fa 0%, #f1f8e9 100%);
  border-radius: 16px;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05); */
  overflow-y: auto;
  min-height:calc(100vh - 154px);
  padding: 10px 20px 10px 20px;
  position: relative;
}

/* 聊天消息区域样式 */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 消息之间的间距 */
  /* 设置聊天消息区域的高度，减去内边距等 */
  height: calc(100% - 40px); 
}

/* 问题消息气泡样式 */
.question-bubble {
  background-color: #d1e9f6;
  color: #2c3e50;
  align-self: flex-start;
  border-radius: 18px 18px 18px 4px;
  padding: 12px 18px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  max-width: 75%;
  position: relative;
  transition: all 0.3s ease;
}

/* 鼠标悬停时问题消息气泡样式 */
.question-bubble:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* 回答消息气泡样式 */
.answer-bubble {
  background-color: #e5f6d1;
  color: #2c3e50;
  align-self: flex-end;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 18px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
  max-width: 75%;
  position: relative;
  transition: all 0.3s ease;
}

/* 鼠标悬停时回答消息气泡样式 */
.answer-bubble:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* 滚动条样式 */
.chat-dialog::-webkit-scrollbar {
  width: 8px;
}

.chat-dialog::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border-radius: 4px;
}

.chat-dialog::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 滚动条在鼠标悬停时样式 */
.chat-dialog::-webkit-scrollbar-thumb:hover {
  background-color: #808080;
}
.question-bubble,
.answer-bubble {
  /* 确保消息有正确的颜色和显示样式 */
  color: #333;
  display: block;
  margin-bottom: 10px;
}

</style>
